<!DOCTYPE html>
<html>
	<head>
		<style>
			@-webkit-keyframes spin {
				0%{-webkit-transform:rotateY(0deg) rotateX(0deg) ;}
				100%{-webkit-transform:rotateY(360deg)  rotateX(360deg);}
			}
			@-moz-keyframes spin{
				0%{-moz-transform:rotateY(0deg)  rotateX(0deg);}
				100%{-moz-transform:rotateY(360deg) rotateX(360deg);}
			}
			@-o-keyframes spin{
				0%{-o-transform:rotateY(0deg)  rotateX(0deg);}
				100%{-o-transform:rotateY(360deg) rotateX(360deg);}
			}
			@keyframes spin{
				0%{transform:rotateY(0deg)  rotateX(0deg);}
				100%{transform:rotateY(360deg) rotateX(360deg);}
			}
			.stage {
				width: 400px;
				height: 400px;
				margin: 15px auto;
				position: relative;
				background: url(http://www.w3cplus.com/sites/default/files/blogs/2013/1311/bg.jpg) repeat center center;
				-webkit-perspective: 300px;
				-moz-perspective: 300px;
				-o-perspective: 300px;
				perspective: 300px;
			}
			.container {
				top: 50%;
				left: 50%;
				margin: -100px 0 0 -100px;
				position: absolute;
				width: 200px;
				height: 200px;
				-webkit-transform-style: preserve-3d;
				-moz-transform-style: preserve-3d;
				-o-transform-style: preserve-3d;
				transform-style: preserve-3d;
				-moz-animation: spin 5s linear infinite;
				-o-animation: spin 5s linear infinite;
				-webkit-animation: spin 5s linear infinite;
				animation: spin 5s linear infinite;
			}
			
			.side {
				background: rgba(142,198,63,0.3);
				border: 2px solid #8ec63f;
				font-size: 60px;
				font-weight: bold;
				color: #fff;
				height: 196px;
				line-height: 196px;
				position: absolute;
				text-align: center;
				text-shadow: 0 -1px 0 rgba(0,0,0,0.2);
				text-transform: uppercase;
				width: 196px;
			}

			.front {
				-webkit-transform: translateZ(100px);
				-moz-transform: translateZ(100px);
				-o-transform: translateZ(100px);
				transform: translateZ(100px);
			}
			.back {
				-webkit-transform: rotateX(180deg) translateZ(100px);
				-moz-transform: rotateX(180deg) translateZ(100px);
				-o-transform: rotateX(180deg) translateZ(100px);
				transform: rotateX(180deg) translateZ(100px);
			}
			.left {
				-webkit-transform: rotateY(-90deg) translateZ(100px);
				-moz-transform: rotateY(-90deg) translateZ(100px);
				-o-transform: rotateY(-90deg) translateZ(100px);
				transform: rotateY(-90deg) translateZ(100px);
			}
			.right {
				-webkit-transform: rotateY(90deg) translateZ(100px);
				-moz-transform: rotateY(90deg) translateZ(100px);
				-o-transform: rotateY(90deg) translateZ(100px);
				transform: rotateY(90deg) translateZ(100px);
			}
			.top {
				-webkit-transform: rotateX(90deg) translateZ(100px);
				-moz-transform: rotateX(90deg) translateZ(100px);
				-o-transform: rotateX(90deg) translateZ(100px);
				transform: rotateX(90deg) translateZ(100px);
			}
			.bottom {
				-webkit-transform: rotateX(-90deg) translateZ(100px);
				-moz-transform: rotateX(-90deg) translateZ(100px);
				-o-transform: rotateX(-90deg) translateZ(100px);
				transform: rotateX(-90deg) translateZ(100px);
			}

		</style>
	</head>
	<body>
		<div class="stage">
			<div class="container">
				<div class="side front">
					1
				</div>
				<div class="side back">
					2
				</div>
				<div class="side left">
					3
				</div>
				<div class="side right">
					4
				</div>
				<div class="side top">
					5
				</div>
				<div class="side bottom">
					6
				</div>
			</div>
		</div>
	</body>
</html>